<template>
  <div>
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
      <div class="widget am-cf">
        <div class="widget-head am-cf">
          <div class="widget-title  am-cf">薪酬确认</div>
        </div>
        <div class="widget-body  am-fr">
          <div class="am-u-sm-12 am-form ">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <select2  v-model="query.areaTeamId" :options="areaTeams">
                  <option value="" disabled>区域</option>
                </select2>
              </div>
            </div>
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <select2  v-model="query.busTeamId" :options="busTeams">
                  <option value="">业务组</option>
                </select2>
              </div>
            </div>
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <select2  v-model="query.periodId" :options="periods">
                  <option value="">期数</option>
                </select2>
              </div>
            </div>

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <select2 v-model="query.gradeId" :options="grades">
                  <option value="">年级</option>
                </select2>
              </div>
            </div>

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <select2 v-model="query.subjectId" :options="subjects">
                  <option value="">学科</option>
                </select2>
              </div>
            </div>

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <input type="text" name="studentName" v-model="query.teacherName" placeholder="请输入姓名"/>
              </div>
            </div>

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <select2 v-model="query.confirmStatus">
                  <option value="">确认状态</option>
                  <option value="0">否</option>
                  <option value="1">是</option>
                </select2>
              </div>
            </div>

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
              <div class="am-form-group">
                <el-date-picker type="month" placeholder="请选择发薪月份" v-model="query.payMonth">
                </el-date-picker>
              </div>
            </div>


            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-u-end">
              <div class="am-form-group">
                <button type="button" class="am-btn am-btn-default am-btn-success"
                        @click="search" ><span class="am-icon-search"></span>查询
                </button>
                <button type="button" class="am-btn am-btn-default am-btn-success"
                        @click="exportData" v-if="hasPermission('export')">导出
                </button>
              </div>
            </div>

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
              <div class="am-form-group am-btn-group-xs">
                <button type="button" class="am-btn am-btn-default am-btn-success"
                        v-if="hasPermission('confirm')"
                        @click="handleBatchConfirm">批量确认
                </button>
                <button type="button" class="am-btn am-btn-default am-btn-success"
                        v-if="hasPermission('cancel')"
                        @click="handleBatchCancel">取消确认
                </button>
                <span style="color: #ea3a3a">（请准时确认信息，财务部门将按该信息进行工资计算）</span>
              </div>
            </div>

          </div>

          <div class="am-u-sm-12">
            <el-table
              :data="tableData"
              border
              stripe
              maxHeight="600"
              @selection-change="handleSelectionChange"
              style="min-width: 100%">
              <el-table-column
                type="selection"
                fixed
                width="55">
              </el-table-column>
              <el-table-column
                prop="classDate"
                label="上课日期"
                min-width="120">
              </el-table-column>
              <el-table-column
                prop="confirmStatus"
                label="确认状态"
                min-width="120">
                <template scope="scope">
                  <div>{{scope.row.confirmStatus === '0'? '否': '是'}}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="periodName"
                label="期数"
                min-width="120">
              </el-table-column>
              <el-table-column
                prop="busTeamName"
                label="业务组"
                min-width="130">
              </el-table-column>
              <el-table-column
                prop="productName"
                label="产品线"
                min-width="100">
              </el-table-column>
              <el-table-column
                prop="segmentNo"
                label="段次"
                min-width="100">
              </el-table-column>
              <el-table-column
                prop="subjectName"
                label="科目"
                min-width="100">
              </el-table-column>
              <el-table-column
                prop="gradeName"
                label="年级"
                min-width="100">
              </el-table-column>
              <el-table-column
                prop="classNo"
                label="班级编号"
                min-width="100">
              </el-table-column>
              <el-table-column
                prop="className"
                label="班级名称"
                min-width="150">
              </el-table-column>
              <el-table-column
                prop="teacherName"
                label="教师"
                min-width="100">
              </el-table-column>
              <el-table-column
                prop="lectureAmount"
                label="班级总讲次"
                min-width="100">
              </el-table-column>
              <el-table-column
                prop="totalLectureNum"
                label="任教讲次"
                min-width="100">
              </el-table-column>
              <el-table-column
                prop="lectureNums"
                label="第几讲"
                min-width="100">
              </el-table-column>
              <el-table-column
                prop="payMonth"
                label="发薪月份"
                min-width="100">
                <template scope="scope">
                  <div>{{scope.row.payMonth | formatDate('YYYY-MM')}}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="operatorName"
                label="确认人"
                min-width="100">
              </el-table-column>
              <el-table-column
                prop="confirmTime"
                label="确认时间"
                min-width="100">
                <template scope="scope">
                  <div>{{scope.row.confirmTime | formatDate('YYYY-MM-DD')}}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="coefficientPerformance"
                label="绩效系数"
                fixed="right"
                min-width="70">
              </el-table-column>
              <el-table-column
                prop="baseDollar"
                label="每讲基本课酬"
                fixed="right"
                min-width="130">
                <template scope="scope">
                  <div>
                    <el-select v-model="scope.row.baseDollar" v-if="scope.row.edit === 1" size="small">
                      <el-option label="370" value="370"></el-option>
                      <el-option label="470" value="470"></el-option>
                      <el-option label="500" value="500"></el-option>
                      <el-option label="700" value="700"></el-option>
                      <el-option label="720" value="720"></el-option>
                      <el-option label="750" value="750"></el-option>
                    </el-select>
                    <div v-else>{{scope.row.baseDollar}}</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="specialDollar"
                label="其他或特殊课酬"
                fixed="right"
                min-width="130">
                <template scope="scope">
                  <div>
                    <el-input v-model="scope.row.specialDollar" v-if="scope.row.edit === 1" size="small">
                    </el-input>
                    <div v-else>{{scope.row.specialDollar}}</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="remark"
                label="备注"
                fixed="right"
                min-width="120">
                <template scope="scope">
                  <div>
                    <el-input v-model="scope.row.remark" v-if="scope.row.edit === 1" size="small">
                    </el-input>
                    <div v-else>{{scope.row.remark}}</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                fixed="right"
                min-width="80">
                <template scope="scope">
                  <div>
                    <el-button type="primary" :disabled="scope.row.confirmStatus === '1'" v-if="scope.row.edit === 0" @click="handleEdit(scope.row)" size="small">编辑</el-button>
                    <el-button type="success" v-if="scope.row.edit === 1" @click="handleConfirm(scope.row)" size="small">保存</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <coefficient-performance-detail ref="coefficientPerformanceDetail"></coefficient-performance-detail>
          <div class="am-u-lg-12 am-cf">
            <div class="am-fr">
              <pagination isShowPageSize @pageSizeChange="pageSize = arguments[0]" v-bind:total="total" v-bind:pageNo="pageNo" v-bind:pageSize="pageSize"
                          @paging="handlePage"/>
            </div>
          </div>

        </div>
      </div>
    </div>

  </div>
</template>
<script>
  import io from '../../lib/io'
  import moment from 'moment'
  import Pagination from '../base/Pagination'
  import CoefficientPerformanceDetail from './CoefficientPerformanceDetail.vue'

  export default{
    data: function () {
      return {
        tableData: [],
        allData: [],
        total: 0,
        pageSize: 10,
        pageNo: 1,
        query: {
          areaTeamId : window.config.areaTeams[0] && window.config.areaTeams[0].areaTeamId || '' ,
          busTeamId : '',
          periodId:'',
          gradeId : '',
          subjectId : '',
          teacherName: '',
          payMonth: moment().add(1, 'M').format('YYYY-MM'),
          confirmStatus: '',
        },
        periods:[],
      }
    },
    components: {
      Pagination, CoefficientPerformanceDetail
    },
    mounted: function () {
      $(window).smoothScroll()
    },
    created: function () {
      this.loadPeriodData()
      this.loadTableData()
    },
    computed: {
      areaTeams: function () {
        var options = ( this.$root.config.areaTeams || [] )
          .map(function (item) {
            return {value: item.areaTeamId, text: item.name}
          })
        return options
      },
      busTeams: function () {
        var options = ( ( this.query.areaTeamId  ) ? ( this.$root.config.groupBusTeams[this.query.areaTeamId] || [] ) : [] )
          .map(function (item) {
            return {value: item.busTeamId, text: item.name}
          })
        this.query.busTeamId = ''
        return options
      },
      grades: function() {
        return this.$root.config.grades.map(function(item) {
          return { value: item.gradeId, text: item.gradeName }
        })
      },
      subjects: function() {
        return this.$root.config.subjects.map(function(item) {
          return { value: item.subjectId, text: item.subjectName }
        })
      }
    },
    watch:{
      'query.areaTeamId':function(){
        this.query.busTeamId =  ''
        this.loadPeriodData()
      }
    },
    methods: {
      handleSelectionChange (val) {
        this.checkList = val
      },
      handleDetail (employeeId) {
        this.$refs.coefficientPerformanceDetail.employeeId = employeeId
        this.$refs.coefficientPerformanceDetail.show()
      },
      handleEdit (row) {
        row.edit = 1
      },
      handleConfirm (row) {
        if (Number(row.specialDollar) !==0 && !row.remark) {
          this.$alert('有其他或特殊课酬，需要填写备注！')
          return
        }
        io.post(io.updateTeacherDollars, {
          teacherDollarsId: row.teacherDollarsId,
          baseDollar: row.baseDollar,
          specialDollar: row.specialDollar,
          remark: row.remark,
        }, (ret) => {
          if (ret.success) {
            row.edit = 0
            this.$toast('更新成功')
            this.loadTableData()
          } else {
            this.$alert(ret.desc)
          }
        })
      },
      handleBatchConfirm (row) {
        if (this.checkList.length === 0) {
          this.$alert('请选择至少一条记录！')
          return
        }
        let teacherDollarsIds = []
        this.checkList.map(val => {
          teacherDollarsIds.push(val.teacherDollarsId)
        })
        this.$confirm('请确认各项信息都无误，确认之后无法再次更改！', () => {
          io.post(io.confirmTeacherDollars, {
            teacherDollarsIds: teacherDollarsIds.join(',')
          }, (ret) => {
            if (ret.success) {
              row.edit = 0
              this.$toast('更新成功')
              this.loadTableData()
            } else {
              this.$alert(ret.desc)
            }
          })
        })
      },
      handleBatchCancel (row) {
        if (this.checkList.length === 0) {
          this.$alert('请选择至少一条记录！')
          return
        }
        let teacherDollarsIds = []
        this.checkList.map(val => {
          teacherDollarsIds.push(val.teacherDollarsId)
        })
        io.post(io.cancelTeacherDollars , {
          teacherDollarsIds: teacherDollarsIds.join(',')
        }, (ret) => {
          if (ret.success) {
            row.edit = 0
            this.$toast('更新成功')
            this.loadTableData()
          } else {
            this.$alert(ret.desc)
          }
        })
      },
      search: function () {
        this.loadTableData(1)
      },
      loadTableData: function (pageNo) {
        var _this = this
        this.pageNo = pageNo || this.pageNo || 1
        if (!this.query.payMonth) {
          this.$alert('请先选中发薪月份！')
          return
        }
        this.query.payMonth = moment(this.query.payMonth).format('YYYY-MM')
        _this.$showLoading()
        io.post(io.findTeacherDollarsDetailList, _this.query, function (ret) {
          _this.$hiddenLoading()
          if (ret.success) {
            ret.data.map(val => {
              val.edit = 0
            })
            _this.allData = ret.data
            _this.total = ret.data.length
            _this.handlePage()
          } else {
            _this.$alert(ret.desc)
          }
        })
      },
      handlePage(pageNo) {
        this.pageNo = pageNo || this.pageNo || 1
        this.tableData = this.allData.slice((this.pageNo-1)*this.pageSize,this.pageSize*(this.pageNo))
      },
      exportData:function(){
        io.downloadFile(io.exportWageTeacherDollars , this.query )
      },
      loadPeriodData: function () {
        var _this = this
        io.post(io.apiAdminPeriodListForAreaTeam, {
          areaTeamId: this.query.areaTeamId
        }, function (ret) {
          if (ret.success) {
            _this.periods = ret.data.map(function (item) {
              return {value: item.periodId, text: item.periodName}
            })
            _this.query.periodId = ret.data.filter(item => item.isCurrent == 1)[0].periodId
            _this.$emit('period.loaded')
            _this.loadTableData(_this.pageNo)
          } else {
            _this.$alert(ret.desc)
          }
        })
      },
    }
  }
</script>
<style scoped>
  .red {
    color: #ea3a3a;
  }
</style>
